import React, { Component } from 'react'
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    TextInput
} from 'react-native'
import { StackActions, NavigationActions } from 'react-navigation';
import { login, getToken } from '../../actions/LoginAction';
import Icon from 'react-native-vector-icons/FontAwesome';
import PrimaryButton from '../../views/primaryButton';
import SendCode from '../../components/SendCode';
import WXStyle from '../../utils/style/wxstyle';
import Style from '../../utils/style/style';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
            phone: '',
            code: ''
        }
    }
    static navigationOptions = {
        headerTitle: '登录',
    };

    _submit() {
        const { phone, code } = this.state
        let params = {
            phone: phone,
            code: code
        }
        console.log(params)
        this.props.login(params);
    };

    _changePhone = (value) => {
        this.setState({
            phone: value
        })
    }
    _changeCode(value) {
        this.setState({
            code: value
        })
    }
    render() {
        const LOGOTEXT = "小猪ERP"
        const { codeDisdbled } = this.state;
        const { loginDisable } = this.props;
        return (
            <View style={styles.container}>
                <View style={[styles.logoWrap]}>
                    <Image style={styles.logo} source={require('../../images/common/logo.png')} />
                    <Text style={styles.logoText}>{LOGOTEXT}</Text>
                </View>
                <View style={[styles.content, styles.bottom]}>
                    <View style={[styles.inputWrap, styles.bottom]}>
                        <View style={styles.iconView}><Icon name="mobile" color={WXStyle.mainColor} size={17}></Icon></View>
                        <SendCode api="/rest/wxauth/vphone" changePhone={this._changePhone} />
                    </View>
                    <View style={styles.inputWrap}>
                        <View style={styles.iconView}><Icon name="key" color={WXStyle.mainColor} size={17}></Icon></View>
                        <TextInput style={[Style.flex1, Style.f17]} underlineColorAndroid="transparent" keyboardType="numeric" onChangeText={(value) => this._changeCode(value)} editable={codeDisdbled} placeholder="请输入验证码"></TextInput>
                    </View>
                </View>
                <PrimaryButton title="登录" submit={() => this._submit()} disable={loginDisable} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: Style.ViewHeightD,
        backgroundColor: '#fff',
        alignItems: 'center'
    },
    logoWrap: {
        marginTop: 34,
        width: Style.width,
        height: 132,
        justifyContent: 'center',
        alignItems: 'center'
    },
    logo: {
        borderColor: WXStyle.mainColor,
        borderWidth: 1,
        borderRadius: 30,
        height: 60,
        width: 60,
        marginBottom: 8,
    },
    logoText: {
        fontSize: 21,
        color: WXStyle.mainColor
    },
    inputWrap: {
        marginLeft: 15,
        width: Style.width - 15,
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
    },
    content: {
        borderTopWidth: 1,
        marginBottom: 20,
    },
    bottom: {
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
    },
    iconView: {
        width: 30,
        height: 25,
        alignItems: 'center',
        justifyContent: 'center'
    }
})
export default connect(
    state => ({ loginDisable: state.User.loginDisable }),
    dispatch => ({ login: bindActionCreators(login, dispatch) ,getToken: bindActionCreators(getToken, dispatch) })
)(User)